<template>
  <div>
    <avue-crud class="crud"
               ref="crud" v-bind="$attrs" v-on="$listeners" :option="option" :page="page" :data="data"
               :table-loading="showLoading" v-model="form" :search.sync="searchForm"
               :before-open="beforeOpen"
               @refresh-change="refreshChange" @search-change="searchChange"
               @size-change="sizeChange" @current-change="currentChange"
               @row-save="rowSave" @row-update="rowUpdate" @row-del="rowDel"
               @sort-change="sortChange" :upload-after="uploadAfter"
               :upload-exceed="uploadExceed"
    >


      <!--菜单栏左边  menuLeft -->
      <!--      <template slot-scope="scope" slot="menuLeft">
              <el-button type="danger"
                         icon="el-icon-plus"
                         size="small"
                         @click="$refs.crud.rowAdd()">新增</el-button>
            </template>-->

      <!-- 菜单操作 menu -->
      <!--      <template slot-scope="{row,index}" slot="menu">
              <el-button type="danger"
                         icon="el-icon-edit"
                         size="small"
                         @click="$refs.crud.rowEdit(row,index)">编辑</el-button>
              <el-button type="success"
                         icon="el-icon-delete"
                         size="small"
                         @click="$refs.crud.rowDel(row,index)">删除</el-button>
            </template>-->

      <!-- 弹窗内按钮  menuForm -->
      <!--      <template slot-scope="{row,index,type}" slot="menuForm">
              <el-button type="primary"
                         icon="el-icon-check"
                         size="small"
                         v-if="type=='add'"
                         @click="$refs.crud.rowSave()"
              >自定义新增</el-button>
              <el-button type="primary"
                         icon="el-icon-check"
                         size="small"
                         v-if="type=='edit'"
                         @click="$refs.crud.rowUpdate()"
              >自定义修改</el-button>
              <el-button type="primary"
                         icon="el-icon-check"
                         size="small"
                         @click="$refs.crud.closeDialog()"
              >取消</el-button>
            </template>-->

      <!-- 头部卡槽 -->
      <!--      <template slot="header">
              <slot name="header"></slot>
            </template>-->

      <!-- 尾部卡槽 -->
      <!--      <template slot="footer">
              <slot name="footer"></slot>
            </template>-->


      <!--菜单栏右边-->
      <template v-slot:menuRight="scope">

        <!-- 导出的按钮 -->
        <el-tooltip class="item" effect="dark" content="导出" placement="top-start" v-if="exportShow">
          <el-button :loading="exportLoading" :size="scope.size" icon="el-icon-download" circle @click="exportExcel">
          </el-button>
        </el-tooltip>

        <slot name="menuRight" v-bind="scope"></slot>
      </template>

      <!-- 自动生成字典卡槽 -->
      <template v-slot:[slot.name]="scope" v-for="slot in dictSlots">
        <!-- 包含,多个标签-->
        <template
          v-if="scope.row[slot.name] && (typeof scope.row[slot.name] === 'string') && scope.row[slot.name].includes(',')">
          <dict-tag v-for="(item, index) in scope.row[slot.name].split(',')" :type="slot.dictType" :value="item"
                    :key="index"/>
          &nbsp;
        </template>

        <dict-tag v-else :type="slot.dictType" :value="scope.row[slot.name]"/>
      </template>

      <!-- 自动生成富文本卡槽 -->
      <template v-slot:[slot.slotName]="scope" v-for="slot in editorSlots">
        <!--        <editor v-model="form[slot.name]" :min-height="192"/>-->
        <div v-html="scope.value" v-if="scope.type === 'view'"></div>
        <WangEditor v-model="form[slot.name]" :min-height="192" v-else/>
      </template>

      <!-- 原始 slot -->
      <template #[slotName]="scope" v-for="(slot, slotName) in $scopedSlots">
        <slot :name="slotName" v-bind:scope="scope"/>
      </template>

    </avue-crud>
  </div>
</template>

<script>
import {del, exp, get, post} from "@/api";
import {getDictDatas} from "@/utils/dict";
import {getAccessToken} from "@/utils/auth";
import Editor from "@/components/Editor/index.vue";
import WangEditor from "@/components/wangeditor/index.vue";
import {handleTree} from "@/utils/ruoyi";

export default {
  name: "EpmCrud",
  components: {
    Editor, WangEditor
  },
  props: {
    /**
     * 基础请求地址
     */
    baseUrl: {
      type: String,
      default: "/",
    },

    updateUrl: {
      type: String,
      default: "",
    },

    /**
     * 表单数据
     */
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },

    /**
     * 额外的查询参数
     */
    extQueryParams: {
      type: Object,
      default: () => {
        return {};
      },
    },

    /**
     * 额外的更新参数
     */
    extUpdateParams: {
      type: Object,
      default: () => {
        return {};
      },
    },

    /**
     * 更新前的钩子
     */
    beforeUpdate: {
      type: Function,
      default: () => {
        return {};
      },
    },

    /**
     * 导出
     */
    exportShow: {
      type: Boolean,
      default: false,
    },

    /**
     * 是否是树形表格
     */
    treeTable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      /**
       * 数据
       */
      data: [],
      /**
       * 是否显示加载中
       */
      showLoading: false,

      exportLoading: false,// 导出加载中


      /**
       * 搜索参数
       */
      queryParam: {},

      /**
       * 分页参数
       */
      defaultPage: {
        simplePage: true, // 简单分页
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },

      /**
       * 列配置
       */
      column: [],

      /**
       * 自动字典组件
       */
      dictSlots: [],
      /**
       * 自动富文本编辑器
       */
      editorSlots: [],

      /**
       * 表单数据
       */
      form: {},

      /**
       * 搜索表单
       */
      searchForm: {},

      // 上传的文件信息
      uploadPropsFiles: {}
    };
  },

  computed: {
    /**
     * 组装参数
     */
    option() {
      // 默认参数
      const defaultOption = {
        printBtn: false,
        filterBtn: false,
        columnBtn: false,
        emptyBtnText: '重置',
        searchMenuSpan: 4,
        menuType: 'icon',
      }
      // 合并参数
      return Object.assign({}, defaultOption, this.$attrs.option, {column: this.column})
    },

    /**
     * 组装分页
     * @returns {string}
     */
    page() {
      const page = this.$attrs.page || {}
      // 合并分页
      return Object.assign({}, this.defaultPage, page)
    },

  },

  watch: {
    formData: {
      handler: function (val, oldVal) {
        this.form = val
      },
      deep: true
    }
  },

  mounted() {
    // 初始化列数据
    this.initColumn()
  },

  methods: {

    /**
     * 初始化数据
     * @param params
     */
    initData(params) {
      this.searchForm = params
      this.getList()
    },

    /**
     * 查询数据
     */
    getList() {
      // 分页参数
      let pageParams = {pageNo: this.page.currentPage, pageSize: this.page.pageSize}
      // 请求参数
      let params = Object.assign({}, pageParams, this.searchForm, this.extQueryParams, this.queryParam)
      // 显示加载中
      this.showLoading = true
      // 请求数据
      const self = this
      get(this.baseUrl + 'page', params).then(res => {
        // 隐藏加载中
        self.showLoading = false
        // 设置数据
        self.data = res.data.list
        // 设置分页
        self.defaultPage.total = parseInt(res.data.total)

        // 树形表格
        if (self.treeTable) {
          self.data = handleTree(res.data.list, "id", "parentId", "children")
        }

      }).catch(err => {
        // 隐藏加载中
        self.showLoading = false
      })
    },

    /**
     * 删除数据
     * @param form
     * @param index
     */
    rowDel(form, index) {
      const self = this;
      this.$confirm('确定删除数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(this.baseUrl + 'delete?id=' + form.id).then(res => {
          self.$message.success("删除成功");
          self.getList()
        }).catch(err => {
          self.$message.error('删除失败')
        })
      }).catch(() => {
      });
    },


    /**
     * 刷新
     */
    refreshChange() {
      this.getList()
    },

    /**
     * 搜索方法
     * @param params
     * @param done
     */
    searchChange(params, done) {
      // 关闭等待框
      done();
      this.defaultPage.currentPage = 1
      this.queryParam = params;
      this.getList();
    },

    /**
     * 分页大小改变
     * @param val
     */
    sizeChange(val) {
      this.defaultPage.currentPage = 1
      this.defaultPage.pageSize = val
      this.getList()
    },

    /**
     * 换页
     * @param val
     */
    currentChange(val) {
      this.defaultPage.currentPage = val
      this.getList()
    },

    /**
     * 排序修改
     * @param column
     */
    sortChange(column) {
      this.queryParam.sortField = column.prop
      this.queryParam.sortOrder = column.order
      this.getList()
    },

    /**
     * 打开表单前
     * @param done
     * @param type   view  edit
     */
    beforeOpen(done, type) {
      if (['view', 'edit'].includes(type)) {
        // 查看和编辑逻辑
      } else {
        //新增逻辑
        this.form = {}
      }
      this.uploadPropsFiles = {};
      done();
    },

    /**
     * 新增
     * @param form
     * @param done
     * @param loading
     */
    rowSave: function (form, done, loading) {
      this.rowUpdate(form, 0, done, loading)
    },

    /**
     * 修改数据
     * @param form
     * @param index
     * @param done
     * @param loading
     */
    rowUpdate: function (form, index, done, loading) {
      const self = this;
      // 复制数据
      let formData = Object.assign({}, this.extUpdateParams, form)
      // 删除不需要的属性
      delete formData.createTime;
      delete formData.updateTime;
      delete formData.creator;
      delete formData.updater;

      // 更新以前处理数据
      if (this.beforeUpdate) {
        this.beforeUpdate(formData);
      }

      const url = this.updateUrl ? this.updateUrl : this.baseUrl + 'update'

      // 更新数据
      post(url, formData).then(res => {
        self.$message.success("操作成功");
        self.getList()
        done(form);
        loading()
      }).catch(err => {
        loading()
      })
    },



    /**
     * 上传文件后
     * 主要是为了后面的文件排序
     * @param res
     * @param done
     * @param loading
     * @param column
     */
    uploadAfter(res, done, loading, column) {
      // 只有一个文件
      if (column.limit && column.limit === 1) {
        done()
        return
      }

      let propsFile = this.uploadPropsFiles[column.prop];
      if (!propsFile) {
        propsFile = {};
      }
      propsFile[res.data] = res.msg;
      this.uploadPropsFiles[column.prop] = propsFile;
      done()

      // 当前值
      const value = this.form[column.prop];
      let arr = value;
      if ('array' !== column['dataType']) {
        // 不是数组
        arr = value.split(',')
      }
      // 对arr进行排序  根据 propsFile
      arr.sort((a, b) => {
        return propsFile[a].localeCompare(propsFile[b])
      })
      if (this.uploadPropsFiles[column.prop]) {
        // 延迟1000
        setTimeout(() => {
          // 排序后的字符串
          if ('array' !== column['dataType']) {
            this.form[column.prop] = arr.join(',')
          } else {
            this.form[column.prop] = arr
          }
        }, 1000)
      }
    },

    /**
     * 超过数量限制
     * @param limit
     * @param files
     * @param fileList
     * @param column
     */
    uploadExceed(limit, files, fileList, column) {
      this.$message.error('文件上传超出数量限制，最多能上传' + limit + '个文件')
    },


    /**
     * 导出数据
     */
    exportExcel() {
      const self = this;
      // 请求参数 合并
      let queryData = Object.assign({}, this.extQueryParams, this.queryParam)
      this.$modal.confirm('确认导出吗?').then(function () {
        self.exportLoading = true;
        return exp(self.baseUrl + 'export-excel', queryData);
      }).then(response => {
        self.$download.excel(response, '数据' + Math.random() + '.xls');
        self.exportLoading = false;
      }).catch((err) => {
        console.log(err)
        // 导出失败
        self.exportLoading = false;
      });
    },


    /**
     * 初始化列
     */
    initColumn() {
      this.column = this.$attrs.option.column
      // 处理列
      this.column.forEach(item => {
        // 加载字典
        if (item.dictType && item.dictType.length > 0) {
          const dictData = getDictDatas(item.dictType)
          // 表单
          this.$set(item, 'dicData', dictData)
          // 表格 列 字典 并且没有指定卡槽
          if (!item.slot) {
            this.dictSlots.push({
              name: item.prop,
              dictType: item.dictType,
            })
            this.$set(item, 'slot', true)
          }
        }

        // 加载业务的数据  直接写 dicurl 没有 授权 token
        if (item.dictUrl && item.dictUrl.length > 0) {
          get(item.dictUrl).then(res => {
            this.$set(item, 'dicData', res.data)
          })
        }

        // 树形数据
        if (item.dictTreeUrl && item.dictTreeUrl.length > 0) {
          get(item.dictTreeUrl).then(res => {
            this.$set(item, 'dicData', handleTree(res.data, 'id'))
          })
        }

        // 必填
        if (item.required && (!item.rules || item.rules.length === 0)) {
          this.$set(item, 'rules', [{required: true, message: '请输入' + item.label, trigger: 'blur'}])
        }

        // 上传文件
        if (item.type === 'upload') {
          // 上传地址
          if (!item.action) {
            this.$set(item, 'action', process.env.VUE_APP_BASE_API + '/admin-api/' + "infra/file/upload")
            this.$set(item, 'headers', {Authorization: 'Bearer ' + getAccessToken()})
          }
          // 响应参数结构
          if (!item.propsHttp) {
            this.$set(item, 'propsHttp', {
              name: 'msg',
              url: 'data',
            })
          }
        }

        // 富文本
        if (item.type === 'editor') {
          // 自定义卡槽
          this.editorSlots.push({
            name: item.prop,
            slotName: item.prop + 'Form'
          })
          this.$set(item, 'formslot', true)
          // 宽度
          this.$set(item, 'span', item.span || 24)
          // 默认值
          this.$set(item, 'value', item.value || '')
        }
      });
    }
  },
};

/**
 * Crud 参数
 * 参数  说明  类型  可选值  默认值
 * value/v-model  绑定值  object  -  -
 * data  显示的数据  array  -  -
 * option  表单配置项参考Option配置  object  -  -
 * before-open  打开前的回调，会暂停Dialog的打开，done用于关闭Dialog,type为当前窗口的类型  function  -  (done,type)=>{}
 * before-close  关闭前的回调，会暂停Dialog的关闭，done用于关闭Dialog,type为当前窗口的类型  function  -  (done,type)=>{}
 * permission  表格多个按钮权限控制，采用函数方式可以精确到行控制  -  -  -
 * search  搜索变量(需要sync修饰符)  object  -  -
 * page  分页变量(需要sync修饰符)参考Page参数  object  -  -
 * cell-class-name  单元格的className的回调方法，也可以使用字符串为所有单元格设置一个固定的className  function  -  ({row,column,rowIndex,columnIndex})=>{}
 * header-cell-class-name  表头单元格的className的回调方法，也可以使用字符串为所有表头单元格设置一个固定的className  function  -  ({row,column,rowIndex,columnIndex})=>{}
 * row-class-name  行的className的回调方法，也可以使用字符串为所有行设置一个固定的className  function  -  ({row,rowIndex})=>{}
 * span-method  合并行或列的计算方法  function  -  ({row,column,rowIndex,columnIndex})=>{}
 * summary-method  自定义的合计计算方法  function  -  ({columns,data})=>{}
 * table-loading  表格等待框的控制  boolean  -  -
 * upload-before  upload组件上传前的回调,done用于继续图片上传，loading用于中断操作  function  -  (file,done,loading)=>{}
 * upload-after  upload组件上传后的回调,done用于结束操作，loading用于中断操作  function  -  (res,done)=>{}
 * upload-delete  upload组件删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除  function  -  (file,column)=>{}
 * upload-preview  upload组件查看回调  function  -  (file,column,done)=>{}
 * upload-error  upload组件上传失败错误回调  function  -  (error,column)=>{}
 * upload-exceed  upload组件上传超过长度限制回调  function  -  (limit,files,fileList,column)=>{}
 * #Page
 * 参数  说明  类型  可选值  默认值
 * currentPage  当前页数  number  -  1
 * pageSize  每页显示条目个数  number  -  20
 * total  总条目数  number  -  0
 * pagerCount  页码按钮的数量，当总页数超过该值时会折叠  number  -  7
 * background  是否为分页按钮添加背景色  boolean  -  true
 * layout  组件布局，子组件名用逗号分隔  string  sizes, prev, pager, next, jumper, ->, total, slot  'prev, pager, next, jumper, ->, total'
 * pageSizes  每页显示个数选择器的选项设置  number[]  -  [10, 20, 30, 40, 50, 100]
 * #Option
 * 参数  说明  类型  可选值  默认值
 * size  组件的尺寸  number  medium/small/mini  small
 * column  表单列配置参考Column相关配置  array  -  -
 * height  表格的高度，默认为自动高度。如果设置为auto，会自适应窗口高度，配合calcHeight参数去调节范围  string  -  -
 * maxHeight  表格的最大高度  array  -  -
 * stripe  是否为斑马纹  boolean  -  false
 * index  是否有序号  boolean  -  false
 * indexWidth  序号列宽度  number  -  50
 * indexFixed  序号列是否冻结列  boolean  -  true
 * indexClassName  序号列的单元格自定义类名  String  -  -
 * indexLabelClassName  序号列标题的自定义类名  String  -  -
 * menu  是否有操作栏  boolean  -  true
 * menuWidth  操作栏宽度  number  -  220
 * menuTitle  操作栏标题  string  -  标题
 * menuFixed  操作栏列冻结列  boolean  -  true
 * menuClassName  操作栏列的单元格自定义类名  String  -  -
 * menuLabelClassName  操作栏列标题的自定义类名  String  -  -
 * menuType  操作栏按钮样式  string  button/icon/text/menu  text
 * menuHeaderAlign  操作栏表头的对齐方式  string  left/center/right  center
 * menuAlign  操作栏按钮的对齐方式  string  left/center/right  center
 * selection  是否有选择框  boolean  -  false
 * selectionWidth  选择框列宽度  number  -  50
 * selectionFixed  选择框列是否冻结列  boolean  -  true
 * selectionClassName  选择框列的单元格自定义类名  String  -  -
 * selectionLabelClassName  选择框列标题的自定义类名  String  -  -
 * expand  是否有展开表格  boolean  -  false
 * expandWidth  展开列宽度  number  -  50
 * expandFixed  展开列是否冻结列  boolean  -  true
 * expandClassName  展开列的单元格自定义类名  String  -  -
 * expandLabelClassName  展开列标题的自定义类名  String  -  -
 * border  是否带有纵向边框  boolean  -  false
 * reserveSelection  在数据更新之后保留之前选中的数据（需指定 rowKey）  boolean  -  false
 * fit  列的宽度是否自撑开  boolean  -  true
 * showHeader  是否显示表头  boolean  -  true
 * header  隐藏表格头部操作  boolean  -  false
 * highlightCurrentRow  是否要高亮当前行  boolean  -  false
 * rowKey  行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。  string  -  id
 * rowParentKey  行数据的 Key，的父类Key用于局部刷新树形表格。  string  -  parentId
 * emptyText  空数据时显示的文本内容  string  -  暂无数据
 * defaultExpandAll  是否默认展开所有行，当前表格包含展开行存在或者为树形表格时有效  boolean  -  false
 * expandRowKeys  可以通过该属性设置 Table 目前的展开行，需要设置 rowKey 属性才能使用，该属性为展开行的 keys 数组。  array  -  false
 * defaultSort  默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序  object  ascending/ descending  ascending
 * showSummary  是否在表尾显示合计行  boolean  -  false
 * lazy  是否懒加载子节点数据,会调用tree-load方法回调  boolean  -  false
 * title  表格标题  string  -  -
 * addBtn  表格新增按钮  boolean  -  true
 * addBtnText  表格新增按钮文案  string  -  新增
 * addBtnIcon  表格新增按钮图标  string  -  -
 * editBtn  表格修改按钮  boolean  -  true
 * editBtnText  表格修改按钮文案  string  -  修改
 * editBtnIcon  表格修改按钮图标  string  -  -
 * delBtn  表格删除按钮  boolean  -  true
 * delBtnText  表格删除按钮文案  string  -  删除
 * delBtnIcon  表格删除按钮图标  string  -  -
 * viewBtn  表格查看按钮  boolean  -  false
 * viewBtnText  表格查看按钮文案  string  -  查看
 * viewBtnIcon  表格查看按钮图标  string  -  -
 * updateBtn  表格弹窗修改按钮  boolean  -  true
 * updateBtnText  表格弹窗修改按钮文案  string  -  修改
 * updateBtnIcon  表格弹窗修改按钮图标  string  -  -
 * saveBtn  表格弹窗保存按钮  boolean  -  true
 * saveBtnText  表格弹窗保存按钮文案  string  -  保存
 * saveBtnIcon  表格弹窗保存按钮图标  string  -  -
 * cancelBtn  表格弹窗取消按钮  boolean  -  true
 * cancelBtnText  表格弹窗取消按钮文案  string  -  取消
 * cancelBtnIcon  表格弹窗取消按钮图标  string  -  -
 * searchBtn  表格搜索按钮  boolean  -  true
 * searchBtnText  表格搜索按钮文案  string  -  搜索
 * searchBtnIcon  表格搜索按钮图标  string  -  -
 * emptyBtn  表格清空按钮  boolean  -  true
 * emptyBtnText  表格清空按钮文案  string  -  清空
 * emptyBtnIcon  表格清空按钮图标  string  -  -
 * printBtn  表格打印按钮  boolean  -  false
 * excelBtn  表格导出按钮  boolean  -  false
 * filterBtn  表格自定义过滤按钮  boolean  -  false
 * refreshBtn  表格刷新数据按钮  boolean  -  true
 * columnBtn  表格列操作按钮  boolean  -  true
 * searchShowBtn  表格搜索显隐按钮  boolean  -  true
 * refreshBtn  表格刷新数据按钮  boolean  -  true
 * copyBtn  表格复制数据按钮  boolean  -  false
 * addTitle  表格新增弹窗标题  string  -  新增
 * editTitle  表格修改弹窗标题  boolean  -  修改
 * viewTitle  表格查看弹窗标题  boolean  -  查看
 * dialogDrag  表格弹窗是否可以拖拽  boolean  -  false
 * dialogFullscreen  表格弹窗是否为全屏  boolean  -  false
 * dialogCustomClass  表格弹窗自定义class  string  -  -
 * dialogEscape  表格弹窗是否可以通过按下ESC关闭  boolean  -  true
 * dialogClickModal  表格弹窗是否可以通过点击modal关闭  boolean  -  false
 * dialogCloseBtn  表格弹窗是否显示关闭按钮  boolean  -  true
 * dialogModal  表格弹窗是否需要遮罩层  boolean  -  true
 * dialogMenuPosition  表格弹窗框按钮的位置  string  left/center/right  right
 * dialogTop  表格弹窗顶部的距离  number  -  25
 * dialogType  表格弹窗方式  string  dialog/drawer  dialog
 * dialogDirection  表格弹窗打开方向  string  rtl/ltr/ttb/tbb  rtl
 * dialogWidth  表格弹窗宽度  string  -  60%
 * searchShow  表格搜索首次是否展示  boolean  -  true
 * searchIcon  表格搜索半收缩按钮  boolean  -  false
 * searchIndex  表格搜索半收缩个数  number  -  2
 * searchMenuPosition  表格搜索按钮位置  left/center/right  -  center
 * searchPlaceholder  搜索项辅助文字  string  —  -
 * searchSpan  搜索项框栅列  number  —  8
 * searchGutter  搜索项框间距  number  —  -
 * searchLabelWidth  搜索项标题宽度  number  —  80
 * searchLabelPosition  搜索项标题位置  string  left/right/top  left
 * #Column-字典属性
 * 参数  说明  类型  可选值  默认值
 * props  数据字典属性的配置对象，具体参考Props参考配置  object  —  —
 * dicData  数据字典值  array  —  —
 * dicUrl  数据字典接口url地址  string  —  —
 * dicQuery  数据字典接口url携带请求参数  object  —  —
 * dicHeaders  数据字典接口url携带头部参数  object  —  —
 * dicFormatter  数据字典接口url返回数据格式化方法  function  —  (res)=>{return res}
 * dicMethod  数据字典接口请求方式  string  —  —
 * #Column-Props
 * 参数  说明  类型  可选值  默认值
 * label  选项标签为选项对象的某个属性值  string  —  label
 * value  选项的值为选项对象的某个属性值  string  —  value
 * children  选项的子选项为选项对象的某个属性值  string  —  children
 * disabled  选项的禁用为选项对象的某个属性值  string  —  disabled
 * res  选项返回结构的层级(例如data.data)  string  —  -
 * #Column-共用属性
 * 参数  说明  类型  可选值  默认值
 * label  列标题  string  —  —
 * prop  列标题的内容属性名称  string  —  -
 * width  对应列的宽度  string  —  -
 * bind  深结构数据绑定值  string  —  -
 * minWidth  对应列的最小宽度，与 width 的区别是 width 是固定的，minWidth 会把剩余宽度按比例分配给设置了 minWidth 的列  string  —  -
 * fixed  列是否固定在左侧或者右侧，true 表示固定在左侧  string  left, right  -
 * className  列的单元格自定义类名  String  -  -
 * labelClassName  列标题的自定义类名  String  -  -
 * sortable  对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件  string  true, false, 'custom'  -
 * formatter  用来格式化列内容  function  -  (row, value, row, column)
 * overHidden  当内容过长被隐藏时显示 tooltip  boolean  -  false
 * align  对齐方式  string  left/center/right  left
 * headerAlign  表头对齐方式，若不设置该项，则使用表格的对齐方式  string  left/center/right  left
 * filters  数据过滤的选项。  boolean  -  false
 * search  是否为搜索项  boolean  —  false
 * searchValue  搜索项初始化值  string  —  -
 * searchPlaceholder  搜索项辅助文字  string  —  -
 * searchSpan  搜索项框栅列  number  —  8
 * searchOrder  搜索项位置排序，序号越大越靠前  number  —  -
 * searchGutter  搜索项框间距  number  —  -
 * searchRange  搜索项为范围搜索  boolean  —  false
 * searchType  搜索项的类型  string  —  -
 * searchLabelWidth  搜索项标题宽度  number  —  80
 * searchClearable  搜索项清除  boolean  —  false
 * searchMultiple  搜索项是否多选  boolean  —  false
 * searchTags  搜索项将选中值按文字的形式展示  boolean  —  false
 * searchLabelPosition  搜索项标题位置  string  left/right/top  left
 * display  弹出表单是否显示  boolean  -  true
 * disabled  弹出表单是否禁止  boolean  -  false
 * addDisabled  表单新增时项是否禁止  boolean  —  false
 * editDisabled  表单编辑时项是否禁止  boolean  —  false
 * viewDisabled  表单查看时项是否禁止  boolean  —  false
 * addDisplay  表单新增时项是否显示  boolean  —  true
 * editDisplay  表单编辑时项是否显示  boolean  —  true
 * viewDisplay  表单查看时项是否显示  boolean  —  true
 * resizable  对应列是否可以通过拖动改变宽度（需要在option中border属性为真）  boolean  —  true
 * #Events
 * 事件名称  说明  参数
 * row-save  新增数据后点击确定触发该事件  row,done,loading
 * row-update  更新数据后确定触发该事件  row,index,done,loading
 * row-del  行数据删除时触发该事件  row,index
 * refresh-change  点击刷新按钮触发该事件(由于page分页信息和search搜索信息是sync修饰符，可以直接通过this.page和this.search拿到)  -
 * search-change  点击搜索后触发该事件(由于page分页信息和search搜索信息是sync修饰符，可以直接通过this.page和this.search拿到)  form,done
 * search-reset  清空搜索回调方法  -
 * dateChange  dateBtn为true时的选择日期回调方法  date
 * tree-load  加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息  row, treeNode, resolve)
 * select  当用户手动勾选数据行的 Checkbox 时触发的事件  selection, row
 * select-all  当用户手动勾选全选 Checkbox 时触发的事件  selection
 * selection-change  当选择项发生变化时会触发该事件  selection
 * cell-mouse-enter  当单元格 hover 进入时会触发该事件  row, column, cell, event
 * cell-mouse-leave  当单元格 hover 退出时会触发该事件  ow, column, cell, event
 * cell-click  当某个单元格被点击时会触发该事件  row, column, cell, event
 * cell-dblclick  当某个单元格被双击击时会触发该事件  row, column, cell, event
 * row-click  当某一行被点击时会触发该事件  row, column, event
 * row-contextmenu  当某一行被鼠标右键点击时会触发该事件  row, column, event
 * row-dblclick  当某一行被双击时会触发该事件  row, column, event
 * header-click  当某一列的表头被点击时会触发该事件  column, event
 * header-contextmenu  当某一列的表头被鼠标右键点击时触发该事件  column, event
 * sort-change  当表格的排序条件发生变化的时候会触发该事件  { column, prop, order }
 * filter-change  当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。  filters
 * current-row-change  当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlightCurrentRow 属性  currentRow, oldCurrentRow
 * header-dragend  当拖动表头改变了列的宽度的时候会触发该事件  newWidth, oldWidth, column, event
 * expand-change  当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）  row, (expandedRows
 * #Methods
 * 事件名称  说明  参数
 * rowAdd  打开表单新增窗口  -
 * rowEdit  打开表单编辑窗口  row,index
 * rowView  打开表单查看窗口  row,index
 * updateDic  更新指定字典  prop,dic
 * dicInit  重新加载全部字典  —
 * getPropRef  获取prop的ref对象  prop
 * validate  对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise  (valid,done,msg)
 * validateField  对部分表单字段进行校验的方法  Function(props: array
 * resetFields  对整个表单进行重置，将所有字段值重置为初始值并移除校验结果  —
 * clearValidate  移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果  Function(props: array
 * clearSelection  用于多选表格，清空用户的选择  —
 * toggleSelection  用于多选表格，传递数组进去，会勾选数组中的对象，如果已经勾选则会取消勾选  array
 * toggleRowSelection  用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）  row, selected
 * toggleAllSelection  用于多选表格，切换所有行的选中状态  -
 * toggleRowExpansion  用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）  row, expanded
 * setCurrentRow  用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。  row
 * clearSort  用于清空排序条件，数据会恢复成未排序的状态  —
 * clearFilter  不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件  columnKey
 * doLayout  对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法  —
 * refreshTable  进行重新初始化渲染  —
 * sort  手动对 Table 进行排序。参数prop属性指定排序列，order指定排序顺序。  prop: string, order: string
 */

/**
 * #Column-字典属性
 * 参数  说明  类型  可选值  默认值
 * props  数据字典属性的配置对象，具体参考Props参考配置  object  —  —
 * dicData  数据字典值  array  —  —
 * dicUrl  数据字典接口url地址  string  —  —
 * dicQuery  数据字典接口url携带请求参数  object  —  —
 * dicHeaders  数据字典接口url携带头部参数  object  —  —
 * dicFormatter  数据字典接口url返回数据格式化方法  function  —  (res)=>{return res}
 * dicMethod  数据字典接口请求方式  string  —  —
 * #Column-Props
 * 参数  说明  类型  可选值  默认值
 * label  选项标签为选项对象的某个属性值  string  —  label
 * value  选项的值为选项对象的某个属性值  string  —  value
 * children  选项的子选项为选项对象的某个属性值  string  —  children
 * disabled  选项的禁用为选项对象的某个属性值  string  —  disabled
 * res  选项返回结构的层级(例如data.data)  string  —  -
 * #Column-Input
 * 参数  说明  类型  可选值  默认值
 * placeholder  输入框占位文本  string  -  请输入/请选择+label名称
 * clearable  是否可清空  boolean  -  true
 * readonly  是否只读  boolean  -  -
 * blur  在失去焦点时触发  function  -  ({column,value})=>{}
 * focus  在获得焦点时触发  function  -  ({column,value})=>{}
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * maxlength  原生属性，最大输入长度  number  -  -
 * minlength  原生属性，最小输入长度  number  -  -
 * prefixIcon  输入框头部图标  string  -  -
 * suffixIcon  输入框尾部图标  number  -  -
 * showPassword  是否显示切换密码图标  boolean  -  true
 * rows  输入框行数，只对 type="textarea" 有效  number  -  2
 * minRows  输入框行最小行数，只对 type="textarea" 有效  number  -  2
 * maxRows  输入框行最大行数，只对 type="textarea" 有效  number  -  6
 * #Column-Number
 * 参数  说明  类型  可选值  默认值
 * placeholder  输入框占位文本  string  -  请输入/请选择+label名称
 * clearable  是否可清空  boolean  -  true
 * readonly  是否只读  boolean  -  -
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * precision  精度  number  -  2
 * min  设置计数器允许的最小值  number  -  -Infinity
 * max  设置计数器允许的最大值  number  -  Infinity
 * step  计数器步长  number  -  1
 * controls  是否使用控制按钮  boolean  true/false  true
 * controlsPosition  控制按钮位置  string  right/top  top
 * #Column-Select
 * 参数  说明  类型  可选值  默认值
 * placeholder  输入框占位文本  string  -  请输入/请选择+label名称
 * clearable  是否可清空  boolean  -  true
 * readonly  是否只读  boolean  -  -
 * blur  在失去焦点时触发  function  -  ({column,value})=>{}
 * focus  在获得焦点时触发  function  -  ({column,value})=>{}
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * cascader  级联的子节点prop  array  -  -
 * cascaderIndex  级联的默认选项序号  number  -  -
 * multiple  多选  boolean  true/false  false
 * tags  多选时是否将选中值按文字的形式展示  boolean  true/false  false
 * allowCreate  是否允许用户创建新条目，需配合 filterable 使用  boolean  true/false  false
 * filterable  是否可搜索  boolean  true/false  false
 * remote  是否为远程搜索  boolean  true/false  false
 * defaultFirstOption  在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用  boolean  true/false  false
 * loadingText  远程加载时显示的文字  string  -  加载中
 * popperClass  下拉框的类名  string  -  -
 * popperAppendToBody  是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false  boolean  -  true
 * #Column-Cascader
 * 参数  说明  类型  可选值  默认值
 * placeholder  输入框占位文本  string  -  请输入/请选择+label名称
 * clearable  是否可清空  boolean  -  true
 * readonly  是否只读  boolean  -  -
 * blur  在失去焦点时触发  function  -  ({column,value})=>{}
 * focus  在获得焦点时触发  function  -  ({column,value})=>{}
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * showAllLevels  级联输入框中是否显示选中值的完整路径  boolean  true/false  true
 * tags  多选时是否将选中值按文字的形式展示  boolean  true/false  false
 * separator  选项分隔符  string  -  -
 * filterable  是否可搜索选项  boolean  true/false  false
 * filterMethod  自定义搜索逻辑，第一个参数是节点node，第二个参数是搜索关键词keyword，通过返回布尔值表示是否命中  function  -  -
 * expandTrigger  次级菜单的展开方式  string  click/hover  hover
 * multiple  是否多选  boolean  true/false  false
 * checkStrictly  是否严格的遵守父子节点不互相关联  boolean  true/false  false
 * emitPath  在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置false，则只返回该节点的值  boolean  true/false  true
 * lazy  是否动态加载子节点，需与 lazyLoad 方法结合使用  boolean  true/false  false
 * lazyLoad  加载动态数据的方法，仅在 lazy 为 true 时有效 function(node, resolve)，node为当前点击的节点，resolve为数据加载完成的回调(必须调用)  function  -  -
 * popperClass  下拉框的类名  string  -  -
 * #Column-Checkbox
 * 参数  说明  类型  可选值  默认值
 * readonly  是否只读  boolean  -  -
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * all  是否启动全选  boolean  true/false  -
 * border  是否显示边框  boolean  true/false  -
 * min  可被勾选的 checkbox 的最小数量  number  -  -
 * max  可被勾选的 checkbox 的最大数量  number  -  -
 * #Column-Radio
 * 参数  说明  类型  可选值  默认值
 * readonly  是否只读  boolean  -  -
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * border  显示边框  boolean  true/false  false
 * button  按钮组类型  boolean  true/false  false
 * #Column-Date
 * 参数  说明  类型  可选值  默认值
 * placeholder  输入框占位文本  string  -  请输入/请选择+label名称
 * clearable  是否可清空  boolean  -  true
 * readonly  是否只读  boolean  -  -
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * startPlaceholder  日期/时间范围开始占位符  string  -  开始
 * endPlaceholder  日期/时间范围结束占位符  string  -  结束
 * rangeSeparator  选择范围时的分隔符  string  -  -
 * valueFormat  真实值的时间格式  string  -  -
 * format  显示值时间格式  string  -  -
 * defaultTime  范围选择时选中日期所使用的当日内具体时刻  string[]  数组，长度为 2，每项值为字符串，形如12:00:00，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 00:00:00  -
 * defaultValue  可选，选择器打开时默认显示的时间  Date  -  -
 * pickerOptions  当前时间日期选择器特有的选项  object  -  -
 * popperClass  下拉框的类名  string  -  -
 * #Column-Time
 * 参数  说明  类型  可选值  默认值
 * placeholder  输入框占位文本  string  -  请输入/请选择+label名称
 * clearable  是否可清空  boolean  -  true
 * readonly  是否只读  boolean  -  -
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * startPlaceholder  日期/时间范围开始占位符  string  -  开始
 * endPlaceholder  日期/时间范围结束占位符  string  -  结束
 * rangeSeparator  选择范围时的分隔符  string  -  -
 * valueFormat  真实值的时间格式  string  -  -
 * format  显示值时间格式  string  -  -
 * defaultValue  可选，选择器打开时默认显示的时间  Date  -  -
 * pickerOptions  当前时间日期选择器特有的选项  object  -  -
 * popperClass  下拉框的类名  string  -  -
 * #Column-Switch
 * 参数  说明  类型  可选值  默认值
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * len  滑块的宽度  number  -  40
 * activeIconClass  打开时所显示图标的类名，设置此项会忽略active-text  string  -  -
 * inactiveIconClass  关闭时所显示图标的类名，设置此项会忽略 inactive-text  string  -  -
 * activeColor  打开时的背景色  string  -  #409EFF
 * inactiveColor  关闭时的背景色  string  -  #C0CCDA
 * #Column-Upload
 * 参数  说明  类型  可选值  默认值
 * accept  upload时文件类型  string/array  -  -
 * fileSize  上传文件的大小限制，单位为KB,超出大小回调upload-error函数进行操作  number  -  -
 * action  必选参数，上传的地址  string  -  -
 * propsHttp  返回数据结构体propsHttp配置  object  -  -
 * data  携带的附加参数  object  -  -
 * headers  携带的头部附加参数  object  -  -
 * limit  最大允许上传个数  number  -  -
 * fileType  如果没后缀，用来指定文件类型  string  -  img/audio/video
 * fileText  按钮上传文案  string  点击上传  -
 * listType  文件列表的类型  string  text/picture/picture-card  text/picture-img
 * dataType：string  array
 * showFileList  是否显示已上传文件列表  boolean  true/false  true
 * multiple  是否支持多选文件  boolean  true/false  false
 * canvasOption  图片水印canvasOption配置  object  -  -
 * drag: true, // 是否支持拖拽上传
 * #Column-propsHttp
 * 参数  说明  类型  可选值  默认值
 * home  图片的根路径地址，例如返回data:{url:' / xxxx.jpg',name:''},home属性为http://xxx.com/,则最终的图片显示地址为http://xxx.com/xxxx.jpg  string  -  -
 * res  返回结构体的层次，例如返回data:{url:'',name:''},则res配置为data  string  -  -
 * url  上传成功返回结构体的图片地址，例如返回data:{urlsrc:'',name:''},则url配置为urlsrc  string  -  -
 * name  上传成功返回结构体的图片名称，例如返回data:{urlsrc:'',namesrc:''},则name配置为namesrc，当listType为picture-img属性不存在  string  -  -
 * fileName  上传文件流时的名称  string  -  file
 * #Column-canvasOption
 * 参数  说明  类型  可选值  默认值
 * text  字体的文字  string  -  avuejs.com
 * fontFamily  字体类型  string  -  microsoft yahei
 * color  字体的颜色  string  -  #999
 * fontSize  字体的大小  string  -  16
 * opacity  文字的透明度  string  -  100
 * bottom  文字距离图片底部的距离  string  -  10
 * right  文字距离图片右边的距离  string  -  10
 * ratio  压缩图片比率0-1(可以是小数)  number  -  1
 * #Column-Array/Url
 * 参数  说明  类型  可选值  默认值
 * alone  单个模式  boolean  true/false  false
 * limit  最大框的个数  number  -  -
 * #Column-Img
 * 参数  说明  类型  可选值  默认值
 * alone  单个模式  boolean  true/false  false
 * limit  最大框的个数  number  -  -
 * fileType  如果没后缀，用来指定文件类型  string  -  img/audio/video
 * #Column-Dynamic
 * 参数  说明  类型  可选值  默认值
 * rowAdd  新增方法  function  -  -
 * rowDel  删除方法  function  -  -
 * type  展示类型  string  form/crud  crud
 * limit  限制当前最大行数  number  -  -
 * #Column-Tree
 * 参数  说明  类型  可选值  默认值
 * placeholder  输入框占位文本  string  -  请输入/请选择+label名称
 * clearable  是否可清空  boolean  -  true
 * readonly  是否只读  boolean  -  -
 * blur  在失去焦点时触发  function  -  ({column,value})=>{}
 * focus  在获得焦点时触发  function  -  ({column,value})=>{}
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * multiple  多选  boolean  true/false  false
 * tags  多选时是否将选中值按文字的形式展示  boolean  true/false  false
 * checkStrictly  在显示复选框的情况下，是否严格的遵循父子不互相关联的做法  boolean  true/false  false
 * parent  是否可以选择父类  boolean  true/false  true
 * accordion  是否每次只打开一个同级树节点展开  boolean  true/false  false
 * defaultExpandAll  是否默认展开所有节点  boolean  true/false  false
 * expandOnClickNode  是否在点击节点的时候展开或者收缩节点,如果为 false，则只有点箭头图标的时候才会展开或者收缩节点  boolean  true/false  false
 * defaultExpandedKeys  默认展开的节点的 key 的数组  array  -  -
 * defaultCheckedKeys  默认勾选的节点的 key 的数组  array  -  -
 * filters  是否开启条件筛选  boolean  true/false  true
 * filterText  条件筛选提示语  string  -  请输入搜索关键字
 * iconClass  自定义树节点的图标  string  -  -
 * leafOnly  子类全选时勾选值是否包含父类  boolean  true/false  true
 * parent  父类是否可以点击和选择  boolean  true/false  true
 * lazy  是否懒加载子节点，需与 load 方法结合使用  boolean  true/false  false
 * treeLoad  加载子树数据的方法，仅当 lazy 属性为true 时生效  function  -  -
 * nodeClick  节点被点击时的回调,共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。  function  -  -
 * checked  当复选框被点击的时候触发共,两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象  function  -  -
 * popperClass  下拉框的类名  string  -  -
 * popperAppendToBody  是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false  boolean  -  true
 * #Column-Table
 * 参数  说明  类型  可选值  默认值
 * formatter  展示数据格式化  function  -  -
 * onLoad  首次加载数据、查询、翻页方法  function  -  -
 * #Column-Icon
 * 参数  说明  类型  可选值  默认值
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * iconList  图标数组  array  -  -
 * #Column-Map
 * 参数  说明  类型  可选值  默认值
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * params  高德地图的初始化参数  object  -  -
 * #Column-Color
 * 参数  说明  类型  可选值  默认值
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * showAlpha  是否支持透明度选择  boolean  -  true
 * colorFormat  颜色的格式  string  hsl/hsv/hex/rgb  rgb
 * popperClass  下拉框的类名  string  -  -
 * predefine  预定义颜色  array  -  -
 * #Column-Slider
 * 参数  说明  类型  可选值  默认值
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * min  最小值  number  -  0
 * max  最大值  number  -  100
 * showInput  是否显示输入框，仅在非范围选择时有效  boolean  -  false
 * showInputControls  在显示输入框的情况下，是否显示输入框的控制按钮  boolean  -  true
 * vertical  是否竖向模式  boolean  -  false
 * height  Slider 高度，竖向模式时必填  string  -  -
 * step  步长  number  -  1
 * range  是否为范围选择  boolean  true/false  false
 * showInput  是否显示输入框，仅在非范围选择时有效  boolean  true/false  false
 * showStops  是否显示间断点  boolean  true/false  false
 * showTooltip  是否显示 tooltip  boolean  true/false  true
 * formatTooltip  格式化 tooltip message  function  true/false  -
 * tooltipClass  tooltip 的自定义类名  string  -  -
 * marks  标记， key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标记可以单独设置样式  object  -  -
 * #Column-Rate
 * 参数  说明  类型  可选值  默认值
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * max  最大分值  number  -  5
 * allowHalf  是否允许半选  boolean  -  false
 * lowThreshold  低分和中等分数的界限值，值本身被划分在低分中  number  -  2
 * highThreshold  高分和中等分数的界限值，值本身被划分在高分中  number  -  4
 * colors  icon 的颜色。若传入数组，共有 3 个元素，为 3 个分段所对应的颜色；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的颜色  array/object  -  ['#F7BA2A', '#F7BA2A', '#F7BA2A']
 * voidColor  未选中 icon 的颜色  string  -  #C6D1DE
 * disabledVoidColor  只读时未选中 icon 的颜色  string  -  #EFF2F7
 * iconClasses  icon 的类名。若传入数组，共有 3 个元素，为 3 个分段所对应的类名；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的类名  array/object  -  ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']
 * voidIconClass  未选中 icon 的类名  string  -  el-icon-star-off
 * disabledVoidIconClass  只读时未选中 icon 的类名  string  -  el-icon-star-on
 * showText  是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容  boolean  -  false
 * showScore  是否显示当前分数，show-score 和 show-text 不能同时为真  boolean  -  false
 * textColor  辅助文字的颜色  string  -  #1F2D3D
 * texts  辅助文字数组  array  -  ['极差', '失望', '一般', '满意', '惊喜']
 * scoreTemplate  分数显示模板  boolean  -  {value}
 * #Events
 * 事件名称  说明  参数
 * submit  表单提交回调事件  form,done
 * reset-change  表单清空回调事件  -
 * #Methods
 * 事件名称  说明  参数
 * submit  对整个表单进行提交 ｜ - ｜
 * resetForm  对整个表单进行重置 ｜ - ｜
 * updateDic  更新指定字典  prop,dic
 * dicInit  重新加载全部字典  —
 * getPropRef  获取prop的ref对象  prop
 * validate  对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise  (callback: Function(boolean, object))
 * validateField  对部分表单字段进行校验的方法  Function(props: array
 * resetFields  对整个表单进行重置，将所有字段值重置为初始值并移除校验结果  —
 * clearValidate  移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果  Function(props: array
 */

/**
 * html :true 是否支持html
 */
</script>

